<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="__STATIC__/tian/common/css/reset.css">
    <link rel="stylesheet" href="__STATIC__/tian/css/login.css">
</head>

<body>
<!-- 登录背景图 -->
<div class="bg">
    <img src="__STATIC__/tian/images/login_bg.png" alt="">
</div>
<!--<a href="{:url('Index/index')}" style="position: absolute;top: .2rem;left: .2rem"><div class="back">返回首页</div></a>-->
<div class="form">
    <!-- 登录注册 -->
    <div class="tabNav">
        <button onclick="onClickTabNav(0,this)" class="on">登录</button>
        <button onclick="onClickTabNav(1,this)">注册</button>
    </div>

    <div style="margin-top: .25rem">
        <!-- 登录 -->
        <div class="login">
            <div class=" item">
                <img src="__STATIC__/tian/images/icon/user.png" alt="">
                <input type="text" id="login_username" placeholder="请输入用户名或者手机号码">
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/password.png" alt="">
                <input type="password" id="login_password" data-flag="true" placeholder="请输入登录密码">
                <img class="show" onclick="onClickshowPs(this)" src="__STATIC__/tian/images/icon/age.png" alt="">
            </div>
        </div>
        <!-- 注册 -->
        <div class="register">
            <div class="item">
                <img src="__STATIC__/tian/images/icon/phone.png" alt="">
                <input type="text" id="register_phone" placeholder="请输入手机号">
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/security-code.png" alt="">
                <input type="text" placeholder="请输入验证码" id="register_code">
                <button id="getCode">获取验证码</button>
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/code.png" alt="">
                <input type="text" placeholder="请输入推荐码" id="register_recommend">
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/password.png" alt="">
                <input type="password" id="register_password" data-flag="true" placeholder="请输入登录密码">
                <img class="show" onclick="onClickshowPs(this)" src="__STATIC__/tian/images/icon/age.png" alt="">
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/password.png" alt="">
                <input type="password" id="register_password_re" data-flag="true" placeholder="请确认登录密码">
                <img class="show" onclick="onClickshowPs(this)" src="__STATIC__/tian/images/icon/age.png" alt="">
            </div>
            <div class="item">
                <img src="__STATIC__/tian/images/icon/password.png" alt="">
                <input type="password" id="register_passwords" data-flag="true" placeholder="请输入支付密码" style="    margin-left: 0.1rem;"/>
                <img class="show" onclick="onClickshowPs(this)" src="__STATIC__/tian/images/icon/age.png" alt="" style="margin-right: .14rem;"/>
            </div>
        </div>

        <a href="{:url('FindPass')}" class="forgetPs">忘记密码</a>
        <button class="submit" id="login_register">登&emsp;录</button>
    </div>
    <div class="bottom-link">
        <div class="register-link">
            <p>还没有账号?</p>
            <button onclick="onClickRegister()">立即注册</button>
        </div>
        <div class="register-link">
            <p>注册即代表您同意</p>
            <a href="#">《XXX会员注册协议》</a>
        </div>
    </div>
</div>
<script src="__STATIC__/User/js/jquery.min.js"></script>
<script>
    var tag = 'login'; // 默认登录 2注册
    // 立即注册
    function onClickRegister() {
        let tabNav = document.querySelector('.tabNav').children
        let login = document.querySelector('.login')
        let register = document.querySelector('.register')
        let link = document.querySelector('.bottom-link').children

        login.style.display = 'none';
        register.style.display = 'block';

        tabNav[0].classList.remove('on')
        tabNav[1].classList.add('on')
        link[0].style.display = 'none';
        link[1].style.display = 'block';
        tag = 'register';
        console.log(tag)
        let submit = document.querySelector('.submit')
        submit.innerHTML = '注&emsp;册'
    }
    // 切换注册登录
    function onClickTabNav(flag, el) {

        let _flag = flag ? flag - 1 : flag + 1
        var border = el.parentElement.children[_flag]

        let login = document.querySelector('.login')
        let register = document.querySelector('.register')

        let submit = document.querySelector('.submit')

        let link = document.querySelector('.bottom-link')

        if (flag == 1) {
            tag = 'register';
            el.classList.add('on')
            border.classList.remove('on')

            register.style.display = 'block'
            login.style.display = 'none'
            submit.innerHTML = '注&emsp;册'

            link.children[0].style.display = 'none'
            link.children[1].style.display = 'block'
        } else {
            tag = 'login';
            el.classList.add('on')
            border.classList.remove('on')

            login.style.display = 'block'
            register.style.display = 'none'

            submit.innerHTML = '登&emsp;录'

            link.children[0].style.display = 'block'
            link.children[1].style.display = 'none'
        }
        console.log(tag)
    }
    console.log(tag)

    // 显示关闭密码
    function onClickshowPs(el) {
        let loginPs = el.parentElement.children[1]

        if (loginPs.getAttribute('data-flag') == 'true') {
            loginPs.type = 'text'
            loginPs.setAttribute('data-flag', false)
        } else {
            loginPs.type = 'password'
            loginPs.setAttribute('data-flag', true)
        }
    }


    // 获取验证码
    function onClickGetCode(callback) {
        document.querySelector('#getCode').addEventListener('click', function (e) {
            this.disabled = true
            let step = 60
            let timer = setInterval(() => {
                if (step <= 1) {
                    this.disabled = false
                    this.innerHTML = '重新获取验证码'
                    clearInterval(timer)
                    callback()
                    return
                }
                step--;
                this.innerHTML = step + '秒'
            }, 1000)

            e.preventDefault()
        })
    }

    //
    onClickGetCode(() => {
        // ... ajax

    })

    //登录注册
    $("#login_register").click(function () {
        if (tag == 'login'){
            //登录
            $.ajax({

                type:"POST",

                url:"{:url('Open/Login_1')}",

                data:{

                    username:$("#login_username").val(),

                    password_login:$("#login_password").val(),

                },

                dataType:"json",

                success:function(data){

                    if(data.status == 1){

                        alert(data.message);

                        window.location.href="{:url('Index/Index')}";

                    }else{

                        alert(data.message);

                    }

                }

            })
        }
        if (tag == 'register'){
            //注册
            var username = $("#register_phone").val();
            var phone = $("#register_phone").val();
            var password_login = $("#register_password").val();
            var password_login_re = $("#register_password_re").val();
            var password_pay = $("#register_passwords").val();
            var recommend = $("#register_recommend").val();
            let x = CheckUser(username)
            let y = CheckUser(recommend)

            if(phone == ""){
                alert('请输入手机号');
                return false;
            }else if(!(/^1[3456789]\d{9}$/.test(phone))){
                alert('手机号码格式错误')
                return false;
            }

            if(password_login == ""){
                alert('请输入登录密码');
                return false;
            }else if(password_login.length < 6){
                alert('请输入6位及以上登录密码');
                return false;
            }
            if (password_login != password_login_re){
                alert('两次密码不一致');
                return false;
            }

            if(password_pay == ""){
                alert('请输入支付密码');
                return false;
            }else if(password_pay.length < 6){
                alert('请输入6位及以上支付密码');
                return false;
            }

            if(recommend == ""){
                alert('请输入推荐账号');
                return false;
            }else if(!y){
                alert('推荐账号不存在');
                return false;
            }

            $.ajax({
                type:"POST",
                url:"{:url('Open/Register')}",
                data:{
                    username:username,
                    phone:phone,
                    password_login:password_login,
                    password_pay:password_pay,
                    recommend:recommend,
                },
                dataType: "json",
                success:function(data){
                    if (data.status == 1){
                        alert(data.message);
                        // window.location.href="http://d.firim.vip/x9pe";
                        window.location.href="{:url('Login')}";
                    }else{
                        alert(data.message);
                    }
                }
            });
        }
    })
    //查看用户是否存在
    function CheckUser(username){
        $.ajax({
            type:"POST",
            url:"{:url('Open/CheckUser')}",
            data:{
                username:username,
            },
            async:false,
            dataType: "json",
            success:function(data){
                flag = data.status;
            }
        });
        return flag
    }
</script>

</body>

</html>